<template>
  <div class="search">
    <Header :isLeft="true" title="搜索" />
    <div class="search_header">
      <form class="search_wrap">
        <i class="fa fa-search"></i>
        <input
          type="text"
          v-model="key_word"
          placeholder="输入商家，商品信息"
          v-focus
        />
        <button @click.prevent="searchHandle">搜索</button>
      </form>
    </div>
    <div class="shop" v-if="result && !showShop">
      <!-- 没有搜索结果 empty为false -->
      <div class="empty_wrap" v-if="empty">
        <img
          src="https://fuss10.elemecdn.com/d/60/70008646170d1f654e926a2aaa3afpng.png"
        />
        <div class="empty_txt">
          <h4>附近没有搜索结果</h4>
          <span>换个关键词试试吧</span>
        </div>
      </div>
      <!-- 有搜索结果 让 empty变回true  -->
      <div v-else>
        <SearchIndex
          @clicklist="$router.push('/shop')"
          :data="result.restaurants"
        />
        <SearchIndex @clicklist="clicklist" :data="result.words" />
      </div>
    </div>
    <!-- 引用组件 商品的展示 -->
    <div class="container" v-if="showShop">
      <FilterView :filterData="filtersData" @update="update" />
      <div
        class="shoplist"
        v-infinite-scroll="loadMore"
        :infinite-scroll-disabled="loading"
      >
        <IndexShop
          v-for="(item, index) in restaurants"
          :key="index"
          :restaurant="item.restaurant"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
import SearchIndex from "../components/SearchIndex";
import FilterView from "../components/FilterView";
import IndexShop from "../components/IndexShop";
import { debounce } from "../utils/debounce";
import { InfiniteScroll } from "mint-ui";
export default {
  name: "search",

  data() {
    return {
      key_word: "", // 搜索框输入的词
      result: null, // 接口返回的数据
      empty: false, // 用于处理没有搜索结果的情况
      showShop: false, // 用展示搜索结果的情况
      filterData: null, // 导航栏
      restaurants: [], // 商品信息
      page: 0,
      size: 7,
      loading: false, // 商品信息是否可以被加载 为false就是可以
      conditionData: null, // 筛选条件
    };
  },

  components: {
    Header,
    SearchIndex,
    FilterView,
    IndexShop,
  },

  methods: {
    // 在搜索框输入内容触发事件
    keyWordChange() {
      this.$axios(`/api/profile/typeahead/${this.key_word}`)
        .then((res) => {
          console.log(res.data);
          this.result = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击搜索按钮触发的事件
    searchHandle() {
      // 没有搜索内容
      if (!this.key_word) return;
      // 搜索
      if (
        this.result &&
        (this.result.restaurants.length > 0 || this.result.words.length > 0)
      ) {
        this.clicklist();
      } else {
        // 没有搜索内容 显示页面
        this.empty = true;
      }
    },
    // 点击商家条目触发的事件
    clicklist() {
      // 对部分data进行初始化 让用户在后面搜索的时候能够重新请求一次数据
      this.page = 0;
      this.restaurants = [];
      // 点击了商家条目，那就让商家条目隐藏
      this.showShop = true;
    },
    // 选出筛选条件
    update(condition) {
      // console.log(condition);
      // 本质上每次根据条件来进行筛选都是请求数据的一次过程
      this.conditionData = condition;

      // 点击其他导航栏重新请求一份数据，但是与所搜索的内容是无关的，只是单纯的展示出来而已
      this.loadMore();

      this.clicklist();
    },
    // 当页面可以进行上下滚动的时候执行这个方法
    loadMore() {
      this.page++;
      this.$axios
        .post(
          `/api/profile/restaurants/${this.page}/${this.size}`,
          this.conditionData
        )
        .then((res) => {
          // this.restaurants = res.data;
          // 不能直接将请求的数据赋给restaurants，因为每次请求的数据都是新的数据，如果直接赋给restaurants的话，后面请求的数据会将前面的数据给覆盖掉
          // 所以需要遍历然后再推进去
          if (res.data.length > 0) {
            // 证明能请求到数据
            res.data.forEach((item) => {
              this.restaurants.push(item);
            });
          } else {
            // 说明没有数据可以请求了 所以就将滚动给禁掉
            this.loading = true; // 禁止滚动
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  created() {
    // 商品筛选数据
    this.$axios("/api/profile/filter")
      .then((res) => {
        // console.log(res);
        this.filtersData = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },

  watch: {
    key_word: debounce(function () {
      this.empty = false;
      this.showShop = false;
      this.keyWordChange();
    }, 800),
  },
};
</script>

<style scoped>
.search {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.search_header {
  margin-top: 45px;
  background: #fff;
  padding: 0 4.266667vw;
}
.search_header .search_wrap {
  padding: 2.933333vw 2.933333vw 2.933333vw 0;
  display: flex;
  align-items: center;
  position: relative;
}
.search_wrap .fa-search {
  width: 2.933333vw;
  height: 2.933333vw;
  color: #888;
  position: absolute;
  top: 4.6666666vw;
  left: 2.933333vw;
}
.search_wrap input {
  flex-grow: 1;
  border-radius: 0.266667vw;
  background-color: #f8f8f8;
  padding: 1.733333vw 4vw 1.733333vw 8.8vw;
  color: #666;
  outline: none;
  border: none;
}
.search_wrap button {
  outline: none;
  border: none;
  color: #333;
  font-size: 0.426667rem;
  background: #fff;
  font-weight: 700;
  margin-left: 2.933333vw;
  font-size: 14px;
}

.shop {
  width: 100%;
  height: calc(100% - 95px);
  overflow: auto;
}

.empty_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: center;
}
.empty_wrap img {
  width: 35vw;
  height: 35vw;
}
.empty_txt h4 {
  color: #666;
  font-size: 1rem;
  margin: 12vw 0 2vw 0;
}
.empty_txt span {
  color: #999;
  font-size: 0.8rem;
}
</style>
